<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="40%">
    <div class="font-bold mb-20px">{{enterprise}}-{{coalType}}</div>
    <el-table v-loading="loading" :data="list" border stripe
      :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" :formatter="dateFormatter"
        :show-overflow-tooltip="true" />
      <el-table-column label="价格生效时间" align="center" prop="runTime" min-width="150" :formatter="dateFormatter"
        :show-overflow-tooltip="true" />
      <el-table-column label="调整价格" align="center" prop="cashPrice" min-width="150" :show-overflow-tooltip="true" />
    </el-table>
    <div v-show="total" style="height: 62px">
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getList" />
    </div>

  </Dialog>
</template>
<script lang="ts" setup>
  import * as coalMarket from '@/api/coalMarket'
  import { dateFormatter } from '@/utils/formatTime'

  const coalId = ref()
  const loading = ref(false)
  const dialogVisible = ref(false)
  const dialogTitle = ref('预约调价数据')
  const enterprise = ref()
  const coalType = ref()
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    coalId: undefined
  })
  const list = ref([])
  const total = ref(0)

  const open = async (row) => {
    dialogVisible.value = true
    enterprise.value = row.collieryName
    coalType.value = row.coalName
    queryParams.coalId = row.coalId
    getList()
  }

  const getList = async () => {
    loading.value = true
    try {
      const data = await coalMarket.getCoalPriceTaskPage(queryParams)
      list.value = data.list || []
      total.value = data.total || 0
    } finally {
      loading.value = false
    }
  }

  defineExpose({ open })
</script>